/*
 * @Author: jiu yin
 * @Date: 2024-06-20 19:06:40
 * @LastEditTime: 2024-07-04 17:15:11
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\liveApp\detail.tsx
 * jiu
 */
import { useState, useEffect } from "react";
import "./index.scss";
import { Button, Image,message } from "antd";
import { useRoute } from "@/hooks";
import CodeTable from "./component/CodeTable";
import { detail_application } from "@/api/home";
import { b_to_mb } from "@/utils";
import Deploy from "./component/Deploy";

export default function detail() {
	const { getParams } = useRoute();
	const { application_id } = getParams();

	let [detail, setDetail] = useState<any>({});

	useEffect(() => {
		detail_application({ application_id: Number(application_id) }).then((res: any) => {
			setDetail(res.data);
		});
	}, []);

	// 部署全部
	let [isModalOpen, setIsModalOpen] = useState(false);
	let [listPico,setListPico]=useState([])
	const all=()=>{
		if(listPico.length==0)return message.error("暂无设备部署")
		setIsModalOpen(true)
	}
	return (
		<div className="base_bg_fff">
			<section className="flex">
				<div className="flex justify-between  p-20px bg-#f7f8ff border-rd-10px flex-1">
					<div className="flex">
						<Image width={180} height={120} style={{ borderRadius: "5px" }} src={detail.cover_url} />
						<div className="ml-36px font-700 flex flex-col justify-around">
							<h3 className="c-#161940 text-20px">{detail.name}</h3>
							<p className="c-#5C5F7A  mt-5px">{detail.describe}</p>

							<ul className="flex text-14px mt-16px">
								<li className="flex mr-28px">
									<span className="c-#9697A9 ml-5px">最大组队成员</span>
									<span className="c-#161940 ml-5px">{detail.max_num}人</span>
								</li>
								<li className="flex mr-28px">
									<span className="c-#9697A9 ml-5px">时长</span>
									<span className="c-#161940 ml-5px">{detail.exp_duration}min</span>
								</li>
								<li className="flex mr-28px">
									<span className="c-#9697A9 ml-5px">场景大小</span>
									<span className="c-#161940 ml-5px">{b_to_mb(detail.size)}MB</span>
								</li>
								<li className="flex mr-28px">
									<span className="c-#9697A9 ml-5px">最新版本</span>
									<span className="c-#161940 ml-5px">V{detail.Latest_version}</span>
								</li>
							</ul>
						</div>
					</div>
					<Button type="primary" onClick={() =>all() }>
						部署全部
					</Button>
				</div>
			</section>

			{isModalOpen && (
				<Deploy isModalOpen={[isModalOpen, setIsModalOpen]} application_id={Number(application_id)} type="all"></Deploy>
			)}
			<CodeTable application_id={Number(application_id)} detail={detail} setListPico={setListPico}></CodeTable>
		</div>
	);
}
